<template>
  <ul>
    <li>id: {{$route.params.id}}</li>
    <li>title: {{detail.title}}</li>
    <li>content: {{detail.content}}</li>
  </ul>
</template>

<script>
  // 详情列表

  export default {
    data() {
      return {
        detail: {}
      }
    },
    mounted () {// 改变当前路由组件参数数据时, 不会重新创建组件对象, mounted不会重新执行【实际生产环境中从后台读取】
      const messageDetails = [
        {id: 1, title: 'Message001', content: 'message content00111....'},
        {id: 2, title: 'Message003', content: 'message content00222....'},
        {id: 3, title: 'Message005', content: 'message content00333....'}
      ]
      this.messageDetails = messageDetails// 将局部变量转化为全局变量
      const id = this.$route.params.id// 获取$router对象中params传递来的id
      this.detail = messageDetails.find(detail => detail.id===id*1)// 过滤取其中一个值
    },

    watch: {
      $route: function (value) { // 改变当前路由组件参数数据时自动调用【实际生产环境中从后台读取】
        console.log('$route()')
        const id = value.params.id
        this.detail = this.messageDetails.find(detail => detail.id===id*1)
      }
    }
  }
</script>

<style>

</style>
